<template>
  <div class="body">0
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container style="margin-top:40px;">
        <el-container>
          <el-main>
           
                <el-row style="margin-bottom:20px;">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">
                  <font color="#A1FEDB" size="4">运行监控</font>
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/operationmonitoring/runcontroller' }">
                  <font color="#A1FEDB" size="4">运行控制</font>
                </el-breadcrumb-item>
               
              </el-breadcrumb>
            </el-row>
           
             <el-row>
                <div id="allmap" class>
              <el-row>
                <el-col :span="6">
                  <!-- <el-row>配电网（展示大电网电压）</el-row> -->
                  <el-row>
                    <div id="table1"></div>
                  </el-row>
                </el-col>
                <el-col :span="6">
                  <!-- <el-row>交流微网（展示交流母线电压）</el-row> -->
                  <el-row>
                    <div id="table2"></div>
                  </el-row>
                </el-col>
                <el-col :span="6">
                  <!-- <el-row>直流实验室（展示直流母线电压）</el-row> -->
                  <el-row>
                    <div id="table3"></div>
                  </el-row>
                </el-col>
                <el-col :span="6">
                  <div id="table4">
                    <div class="zz">
                      <el-form
                        :inline="true"
                        :label-position="labelPosition"
                        label-width="125px"
                        :model="formLabelAlign"
                        size="mini"
                      >
                        <!-- <el-form-item label="最大电压跌落">
                          <el-input v-model="formLabelAlign.name"></el-input>
                        </el-form-item>
                        <el-form-item label="最大频率跌落">
                          <el-input v-model="formLabelAlign.region"></el-input>
                        </el-form-item>
                        <el-form-item label="最大功率缺额">
                          <el-input v-model="formLabelAlign.type"></el-input>
                        </el-form-item>
                        <el-form-item label="暂态过程时间">
                          <el-input v-model="formLabelAlign.type2"></el-input>
                        </el-form-item> -->
                        <el-form-item label="配电网电压(V)">
                          <el-input v-model="formLabelAlign.data1"></el-input>
                        </el-form-item>
                        <el-form-item label="频率(HZ)">
                          <el-input v-model="formLabelAlign.data2"></el-input>
                        </el-form-item>
                        <el-form-item label="交流母线电压(V)">
                          <el-input v-model="formLabelAlign.data3"></el-input>
                        </el-form-item>
                        <el-form-item label="频率(HZ)">
                          <el-input v-model="formLabelAlign.data4"></el-input>
                        </el-form-item>
                         <el-form-item label="MMC直流侧电压">
                          <el-input v-model="formLabelAlign.data5"></el-input>
                        </el-form-item>
                        <el-form-item label="直流母线电压(V)">
                          <el-input v-model="formLabelAlign.data6"></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button round type="primary">
                            <nuxt-link to="/operationmonitoring/statesecurity">
                              <font color="white">状态安全分析</font>
                            </nuxt-link></el-button
                          >
                          <el-button round type="primary"
                            ><nuxt-link
                              to="/operationmonitoring/auxiliarycontrol"
                            >
                              <font color="white">系统平衡控制</font>
                            </nuxt-link></el-button
                          >
                           <el-button round type="primary"
                            ><nuxt-link
                              to="/operationmonitoring/runpoilcylibrary"
                            >
                              <font color="white">运行控制</font>
                            </nuxt-link></el-button
                          >
                            <el-button round type="primary"
                            ><nuxt-link
                              to="/operationmonitoring/sequencecontrol"
                            >
                              <font color="white">顺序控制</font>
                            </nuxt-link></el-button
                          >
                            <el-button round type="primary"
                            ><nuxt-link
                              to="/operationmonitoring/manualcontrol"
                            >
                              <font color="white">手动控制</font>
                            </nuxt-link></el-button
                          >
                            <el-button round type="primary"
                            ><nuxt-link
                              to="/operationmonitoring/automaticcontroller"
                            >
                              <font color="white">自动控制</font>
                            </nuxt-link></el-button
                          >
                          <!-- <el-button
                            style="margin-top:10px;"
                            round
                            type="primary"
                            @click="handle_replace"
                            >打开拓扑</el-button
                          > -->
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <div
                  id="topology-canvas"
                  class="full"
                  @contextmenu="onContextMenu($event)"
                >
                  <el-button type="primary" class="newbutton3" round>
                <font color="white">视图:</font> {{ scale }}%
              </el-button>
              <el-button
                type="primary"
                icon="el-icon-zoom-in"
                class="newbutton1"
                round
                @click="scaleadd()"
              >
                放大
              </el-button>
              <el-button
                type="primary"
                icon="el-icon-zoom-out"
                class="newbutton2"
                round
                @click="scaleminus()"
              >
                缩小
              </el-button>
              <el-button
                type="primary"
                class="newbutton4"
                round
                @click="reset()"
              >
                重置
              </el-button>
                
                </div>
              </el-row>
            </div>
             </el-row>
           
          </el-main>
        </el-container>
      </el-container>
      <Bottom></Bottom>
    </el-container>
     <div
      class="context-menu"
      v-if="contextmenu.left && props.node"
      :style="this.contextmenu"
    >
      <!-- <CanvasContextMenu2
        :canvas="canvas"
        :props.sync="props"
        @ee="changshow"
        @ee2="showdetialinfo"
      ></CanvasContextMenu2> -->
     
      <!-- <CanvasContextMenu2
        :canvas="canvas"
        :props.sync="props"
        @ee="changshow"
        @ee2="showdetialinfo"
        @ee3="controller"
      ></CanvasContextMenu2> -->
    </div>
     <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item class="form" label="账号:" prop="age">
          <el-input class="input1" v-model.number="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item  class="form" label="密码:" prop="pass">
          <el-input
          class="input1"
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item  class="form" label="确认密码:" prop="checkPass">
          <el-input
          class="input1"
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item>
          <el-button type="primary" round @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button type="primary" round @click="resetForm('ruleForm')"
            >重置</el-button
          >
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="resetForm('ruleForm')"
          >重置</el-button
        >
        <el-button type="primary" round @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" round @click="showstate">确 定</el-button>
      </span>
    </el-dialog>

   <!-- 提示信息弹出框 -->
     <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose"
    >
      <span
        >尊敬的用户，您已经获得修改开关状态的权限，当前开关的状态是:{{
          nowstate
        }}，您将在接下来的一分钟内获取修改拓扑开关状态的权限，
        过时权限将失效，需重新登陆。</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="dialogVisible2 = false"
          >取 消</el-button
        >
        <el-button type="primary" round @click="showstate2">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 显示拓扑中设备详细信息 -->
     <el-dialog
      title="设备详细信息："
      :visible.sync="dialogVisible3"
      width="40%"
      :before-close="handleClose"
      class="newdialo"
    >
       <el-table
                          :data="tableData2"
                          style="width: 100%"
                          :row-style="getRowClass3"
                          :header-row-style="getRowClass3"
                          :header-cell-style="getRowClass3"
                        >
                          <el-table-column
                            prop="data1"
                            label="控件类型"
                           
                          >
                          </el-table-column>
                          <el-table-column
                            prop="data2"
                            label="开关状态"
                          
                          >
                          </el-table-column>
                           <el-table-column
                            prop="data3"
                            label="电压(V)"
                          
                          >
                          </el-table-column>
                           <el-table-column
                            prop="data4"
                            label="电流(A)"
                          
                          >
                          </el-table-column>
                           <el-table-column
                            prop="data5"
                            label="产生电量(kW)"
                          
                          >
                          
                          </el-table-column>
                           <el-table-column
                            prop="data6"
                            label="剩余电量(kW)"
                          
                          >
                          
                          </el-table-column>
                             </el-table-column>
                           <el-table-column
                            prop="data7"
                            label="使用电量(kW)"
                          
                          >
                          
                          </el-table-column>
                           </el-table-column>
                             </el-table-column>
                           <el-table-column
                            prop="data7"
                            label="有功功率(kW·h)"
                          
                          >
                          
                          </el-table-column>
                           </el-table-column>
                             </el-table-column>
                           <el-table-column
                            prop="data7"
                            label="无功功率(kW·h)"
                          
                          >
                          
                          </el-table-column>
                         
                        </el-table>
     
    </el-dialog>
  </div>
</template>
<script>
import echarts from 'echarts'

import { Topology } from 'topology-core'
import { Node } from 'topology-core/models/node'
import { Line } from 'topology-core/models/line'
import * as FileSaver from 'file-saver'

import { Tools, canvasRegister } from '~/services/canvas'

import CanvasProps from '~/components/CanvasProps'
import CanvasContextMenu2 from '~/components/CanvasContextMenu2'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
     var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
     
      canvas: {},
      canvasOptions: {
        rotateCursor: '/img/rotate.cur'
      },
      props: {
        a: null,
        node: null,
        line: null,
        nodes: null,
        multi: false,
        locked: false
      },
      contextmenu: {
        left: null,
        top: null,
        bottom: null
      },

      labelPosition: 'right',
        dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
       level: 1,
        nowstate: '关',
       formInline: {
        data1: '100',
        data2: '200',
         data3: '120',
          data4: '130',
             data5: '120',
                data6: '130',
      },
      showimage: true,
      showimage2: false,
      ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        age: [{ validator: checkAge, trigger: 'blur' }]
      },
      formLabelAlign: {
        data1: '1',
        data2: '2',
        data3: '3',
        data4: '4',
        data5: '5',
        data6: '6',
      },
         tableData2: [
        {
          data1: '',
          data2: '',
         data3: '',
         data4: '',
         data5: '',
         data6: '',
         data7: '',
        }
      ],
    
      activeIndex: '3',

      activeName: 'first',
      // voltage1:[4,5,6,3,7,12,21,34,54,9,21,32,13,14,32,12,56,78,21,14,43,],
      // voltage2:[4,5,6,3,7,12,21,34,54,9,21,32,13,14,32,12,56,78,21,14,43,],
      // voltage3:[4,5,6,3,7,12,21,34,54,9,21,32,13,14,32,12,56,78,21,14,43,],
       voltage1:[],
      voltage2:[],
      voltage3:[],


     
    }
  },
  components: {
    CanvasProps,
    CanvasContextMenu2,
    Index,
    Bottom
  },
  computed: {
    scale() {
      return Math.floor(this.$store.state.canvas.data.scale * 100)
    },
    event() {
      return this.$store.state.event.event
    }
  },
  watch: {
    event(curVal) {
      if (this['handle_' + curVal.name]) {
        this['handle_' + curVal.name](curVal.data)
      }
    },
    $route(val) {
      this.open()
    }
  },
  created() {
    canvasRegister()
    //控制鼠标右键点击的面板当点击空白处时消失
    if (process.client) {
      document.onclick = event => {
        this.contextmenu = {
          left: null,
          top: null,
          bottom: null
        }
      }
    }
  },

  mounted() {
    // this.canvasOptions.on = this.onMessage
    this.canvas = new Topology('topology-canvas', this.canvasOptions)
    this.open()
     this.handle_readtodatabase()
     
     this.readdata()
     this.laterpowercurve()
   
  },

  methods: {
     controller(val){
       console.log(val.text)
      if(val.text=="3kW垂直抽风机一台"){
          this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'first'} })
          // this.$router.push({path:"/menLink",query:{alert:"页面跳转成功"}})
      }else if(val.text=="2kW卧式抽风机一台"){
         this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'first'} })

      }else if(val.text=="100kW燃气发电机↵112kW溴化锂机组"){
             this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'second'} })
      }else if(val.text=="50kW阻断型换流器"){
         this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'third'} })

      }else if(val.text=="功率型储能"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'fourth'} })
      }else if(val.text=="空调内机"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'twelfth'} })
      }else if(val.text=="直流排风扇"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'twelfth'} })
      }else if(val.text=="照明"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'twelfth'} })
      }else if(val.text=="备用开关"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'twelfth'} })
      }else if(val.text=="10kWDC/DC"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'ninth'} })
      }else if(val.text=="10kWDC/AC"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'ninth'} })
      }else if(val.text=="直流一体化设备"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'seventh'} })
      }else if(val.text=="直流配电室↵直流负荷配电柜"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'thirteenth'} })
      }else if(val.text=="30kW直流光伏"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'eighth'} })
      }else if(val.text=="30kW磷酸铁锂电池"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'tenth'} })
      }else if(val.text=="7kW集装箱无线充电桩"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'eleventh'} })
      }else if(val.text=="50kWDC/DC"){
            this.$router.push({ path: '/systemoverview/remotecontrolandsetting',query:{activeName:'sixth'} })
      }
      else{
         this.$message.error('您选择的设备暂时无法进行遥调遥控')
      }
    },
    showdetialinfo(val){
      console.log(val)
      if(val.text=="3kW垂直抽风机一台"){
          this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'first'} })
          // this.$router.push({path:"/menLink",query:{alert:"页面跳转成功"}})
      }else if(val.text=="2kW卧式抽风机一台"){
         this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'first'} })

      }else if(val.text=="100kW燃气发电机↵112kW溴化锂机组"){
             this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'second'} })
      }else if(val.text=="50kW阻断型换流器"){
         this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'third'} })

      }else if(val.text=="功率型储能"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'fourth'} })
      }else if(val.text=="空调内机"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'twelfth'} })
      }else if(val.text=="直流排风扇"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'twelfth'} })
      }else if(val.text=="照明"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'twelfth'} })
      }else if(val.text=="备用开关"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'twelfth'} })
      }else if(val.text=="10kWDC/DC"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'ninth'} })
      }else if(val.text=="10kWDC/AC"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'ninth'} })
      }else if(val.text=="直流一体化设备"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'seventh'} })
      }else if(val.text=="直流配电室↵直流负荷配电柜"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'thirteenth'} })
      }else if(val.text=="30kW直流光伏"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'eighth'} })
      }else if(val.text=="30kW磷酸铁锂电池"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'tenth'} })
      }else if(val.text=="7kW集装箱无线充电桩"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'eleventh'} })
      }else if(val.text=="50kWDC/DC"){
            this.$router.push({ path: '/systemoverview/operationparameters',query:{activeName:'sixth'} })
      }
      else{
         this.$message.error('您选择的设备暂时无法检测到信息')
      }
    //  this.dialogVisible3=true
    },
     readdata() {
      this.$axios({
        method: 'get',
        // params: {
        //   name: name,
        //   date: this.value2
        // },
        url: 'http://127.0.0.1:8082/run/searchall'
      }).then(res => {
        
        //将数据库中的text类型文件转为json，就能读取了，要不然text是以字节为单位读取数据的
        //  let newpower1 = JSON.parse(res.data[0].配电网电压)
        //   let newpower2 = JSON.parse(res.data[0].交流微网电压)
        //    let newpower3 = JSON.parse(res.data[0].直流实验室电压)
           this.voltage1= JSON.parse(res.data[0].配电网电压);
             this.voltage2=JSON.parse(res.data[0].交流微网电压);
              this.voltage3=JSON.parse(res.data[0].直流实验室电压);
        //配电网电压
        this.formLabelAlign.data1=res.data[0].系统频率
        //频率
         this.formLabelAlign.data2=res.data[0].系统电压
         //交流母线电压
          this.formLabelAlign.data3=res.data[0].总有功功率
          //频率
           this.formLabelAlign.data4=res.data[0].总无功功率
           //MMC直流侧电压
            this.formLabelAlign.data5=res.data[0].总有功负荷
            //直流母线电压
            this.formLabelAlign.data6=res.data[0].总无功负荷
       
           
           
           

        
      })
    },
    //延迟执行函数
    laterpowercurve() {
      setTimeout(() => {
        this.showecharts()
      }, 3000)
    },
    showecharts(){
       let myChart1 = this.$echarts.init(document.getElementById('table1'))
    let option = {
      // backgroundColor: '#005A5B',
      title: {
        text: '配电侧电压(单位/V)',
        textStyle: {
          color: '#ffffff'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['配电网电压']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          data: [
           '0:00',
              '0:15',
              '0:30',
              '0:45',
              '1:00',
              '1:15',
              '1:30',
              '1:45',

              '2:00',
              '2:15',
              '2:30',
              '2:45',
              '3:00',
              '3:15',
              '3:30',
              '3:45',
              '4:00',
              '4:15',
              '4:30',
              '4:45',
              '5:00',
              '5:15',
              '5:30',
              '5:45',
              '6:00',
              '6:15',
              '6:30',
              '6:45',
              '7:00',
              '7:15',
              '7:30',
              '7:45',
              '8:00',
              '8:15',
              '8:30',
              '8:45',
              '9:00',
              '9:15',
              '9:30',
              '9:45',
              '10:00',
              '10:15',
              '10:30',
              '10:45',
              '11:00',
              '11:15',
              '11:30',
              '11:45',
              '12:00',
              '12:15',
              '12:30',
              '12:45',
              '13:00',
              '13:15',
              '13:30',
              '13:45',
              '14:00',
              '14:15',
              '14:30',
              '14:45',
              '15:00',
              '15:15',
              '15:30',
              '15:45',
              '16:00',
              '16:15',
              '16:30',
              '16:45',
              '17:00',
              '17:15',
              '17:30',
              '17:45',
              '18:00',
              '18:15',
              '18:30',
              '18:45',
              '19:00',
              '19:15',
              '19:30',
              '19:45',
              '20:00',
              '20:15',
              '20:30',
              '20:45',
              '21:00',
              '21:15',
              '21:30',
              '21:45',
              '22:00',
              '22:15',
              '22:30',
              '22:45',
              '23:00',
              '23:15',
              '23:30',
              '23:45',
              '24:00(时/分)'
          ]
        }
      ],
      yAxis: [
        {
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          type: 'value'
        }
      ],
      series: [
        {
          name: '配网电压',
          type: 'line',
          stack: '总量',
          smooth: true, //曲线平滑
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default',
                //渐变色实现
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //变化度
                  //三种由深及浅的颜色
                  [
                    {
                      offset: 0,
                      color: '#3ebf9b'
                    },
                    {
                      offset: 0.5,
                      color: '#267268'
                    },
                    {
                      offset: 1,
                      color: '#14323f'
                    }
                  ]
                )
              },
              lineStyle: {
                //线的颜色
                color: '#349e85'
              },
              //以及在折线图每个日期点顶端显示数字
              label: {
                show: false,
                position: 'top',
                textStyle: {
                  color: 'white'
                }
              }
            }
          },
          areaStyle: {},
          data:this.voltage1
        }
      ]
    }
   
    myChart1.setOption(option)
   
    let myChart2 = this.$echarts.init(document.getElementById('table2'))
    let option2 = {
      // backgroundColor: '#005A5B',
      title: {
        text: '微能网交流母线电压(单位/V)',
        textStyle: {
          color: '#ffffff'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['交流母线电压']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          data: [
            '0:00',
              '0:15',
              '0:30',
              '0:45',
              '1:00',
              '1:15',
              '1:30',
              '1:45',

              '2:00',
              '2:15',
              '2:30',
              '2:45',
              '3:00',
              '3:15',
              '3:30',
              '3:45',
              '4:00',
              '4:15',
              '4:30',
              '4:45',
              '5:00',
              '5:15',
              '5:30',
              '5:45',
              '6:00',
              '6:15',
              '6:30',
              '6:45',
              '7:00',
              '7:15',
              '7:30',
              '7:45',
              '8:00',
              '8:15',
              '8:30',
              '8:45',
              '9:00',
              '9:15',
              '9:30',
              '9:45',
              '10:00',
              '10:15',
              '10:30',
              '10:45',
              '11:00',
              '11:15',
              '11:30',
              '11:45',
              '12:00',
              '12:15',
              '12:30',
              '12:45',
              '13:00',
              '13:15',
              '13:30',
              '13:45',
              '14:00',
              '14:15',
              '14:30',
              '14:45',
              '15:00',
              '15:15',
              '15:30',
              '15:45',
              '16:00',
              '16:15',
              '16:30',
              '16:45',
              '17:00',
              '17:15',
              '17:30',
              '17:45',
              '18:00',
              '18:15',
              '18:30',
              '18:45',
              '19:00',
              '19:15',
              '19:30',
              '19:45',
              '20:00',
              '20:15',
              '20:30',
              '20:45',
              '21:00',
              '21:15',
              '21:30',
              '21:45',
              '22:00',
              '22:15',
              '22:30',
              '22:45',
              '23:00',
              '23:15',
              '23:30',
              '23:45',
              '24:00(时/分)'
          ]
        }
      ],
      yAxis: [
        {
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          type: 'value'
        }
      ],
      series: [
        {
          name: '交流母线电压',
          type: 'line',
          stack: '总量',
          smooth: true, //曲线平滑
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default',
                //渐变色实现
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //变化度
                  //三种由深及浅的颜色
                  [
                    {
                      offset: 0,
                      color: '#3ebf9b'
                    },
                    {
                      offset: 0.5,
                      color: '#267268'
                    },
                    {
                      offset: 1,
                      color: '#14323f'
                    }
                  ]
                )
              },
              lineStyle: {
                //线的颜色
                color: '#349e85'
              },
              //以及在折线图每个日期点顶端显示数字
              label: {
                show: false,
                position: 'top',
                textStyle: {
                  color: 'white'
                }
              }
            }
          },
          areaStyle: {},
          data:this.voltage2
        }
      ]
    }
    myChart2.setOption(option2)
   

    let myChart3 = this.$echarts.init(document.getElementById('table3'))
    let option3 = {
      // backgroundColor: '#005A5B',
      title: {
        text: '直流实验室直流母线电压(单位/V)',
        textStyle: {
          color: '#ffffff'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['直流母线']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          data: [
          '0:00',
              '0:15',
              '0:30',
              '0:45',
              '1:00',
              '1:15',
              '1:30',
              '1:45',

              '2:00',
              '2:15',
              '2:30',
              '2:45',
              '3:00',
              '3:15',
              '3:30',
              '3:45',
              '4:00',
              '4:15',
              '4:30',
              '4:45',
              '5:00',
              '5:15',
              '5:30',
              '5:45',
              '6:00',
              '6:15',
              '6:30',
              '6:45',
              '7:00',
              '7:15',
              '7:30',
              '7:45',
              '8:00',
              '8:15',
              '8:30',
              '8:45',
              '9:00',
              '9:15',
              '9:30',
              '9:45',
              '10:00',
              '10:15',
              '10:30',
              '10:45',
              '11:00',
              '11:15',
              '11:30',
              '11:45',
              '12:00',
              '12:15',
              '12:30',
              '12:45',
              '13:00',
              '13:15',
              '13:30',
              '13:45',
              '14:00',
              '14:15',
              '14:30',
              '14:45',
              '15:00',
              '15:15',
              '15:30',
              '15:45',
              '16:00',
              '16:15',
              '16:30',
              '16:45',
              '17:00',
              '17:15',
              '17:30',
              '17:45',
              '18:00',
              '18:15',
              '18:30',
              '18:45',
              '19:00',
              '19:15',
              '19:30',
              '19:45',
              '20:00',
              '20:15',
              '20:30',
              '20:45',
              '21:00',
              '21:15',
              '21:30',
              '21:45',
              '22:00',
              '22:15',
              '22:30',
              '22:45',
              '23:00',
              '23:15',
              '23:30',
              '23:45',
              '24:00(时/分)'
          ]
        }
      ],
      yAxis: [
        {
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          type: 'value'
        }
      ],
      series: [
        {
          name: '直流母线电压',
          type: 'line',
          stack: '总量',
          smooth: true, //曲线平滑
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default',
                //渐变色实现
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //变化度
                  //三种由深及浅的颜色
                  [
                    {
                      offset: 0,
                      color: '#3ebf9b'
                    },
                    {
                      offset: 0.5,
                      color: '#267268'
                    },
                    {
                      offset: 1,
                      color: '#14323f'
                    }
                  ]
                )
              },
              lineStyle: {
                //线的颜色
                color: '#349e85'
              },
              //以及在折线图每个日期点顶端显示数字
              label: {
                show: false,
                position: 'top',
                textStyle: {
                  color: 'white'
                }
              }
            }
          },
          areaStyle: {},
          data:this.voltage3
        }
      ]
    }
    myChart3.setOption(option3)
    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function() {
      myChart1.resize()
       myChart2.resize()
        myChart3.resize()
    })
    },
     showstate2(event, data) {
      this.dialogVisible2 = false
      setTimeout(this.cleanage, '60000')
    },
      cleanage() {
      this.ruleForm.age = ''
      this.ruleForm.pass = ''
      this.ruleForm.checkPass = ''
      console.log('执行了定时器，清空了账户')
    },
    showstate() {
      console.log('执行showstate')
      this.dialogVisible = false
      this.dialogVisible2 = true
    },
     handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
      resetForm(formName) {
      this.$refs[formName].resetFields()
    },
     changshow() {
      this.dialogVisible = true
    },
  
     //放大画布
    scaleadd() {
     
      let add = this.level
      add = add + 0.1

      this.canvas.scaleTo(add)
      this.level = add
      this.$store.commit('canvas/data', {
        scale: this.level,
        lineName: this.canvas.data.lineName,
        fromArrowType: this.canvas.data.fromArrowType,
        toArrowType: this.canvas.data.toArrowType,
        fromArrowlockedType: this.canvas.data.locked
      })
    },
     scaleminus() {
     
      let minus = this.level
      minus = minus - 0.1
      this.canvas.scaleTo(minus)
      this.level = minus

      this.$store.commit('canvas/data', {
        scale: this.level,
        lineName: this.canvas.data.lineName,
        fromArrowType: this.canvas.data.fromArrowType,
        toArrowType: this.canvas.data.toArrowType,
        fromArrowlockedType: this.canvas.data.locked
      })
     
    },
     reset() {
      this.level = 1
      this.canvas.scaleTo(this.level)

      this.$store.commit('canvas/data', {
        scale: 1,
        lineName: this.canvas.data.lineName,
        fromArrowType: this.canvas.data.fromArrowType,
        toArrowType: this.canvas.data.toArrowType,
        fromArrowlockedType: this.canvas.data.locked
      })
    },
    async open() {
      if (!this.$route.query.id) {
        return
      }
      const data = await this.$axios.$get(
        '/api/topology/' + this.$route.query.id
      )
      if (data && data.id) {
        this.canvas.open(data.data)
      }
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // onMessage(event, data) {
    //   switch (event) {
    //     //当画布中元素被选中后执行的操作
    //     case 'node':
    //       // this.$axios({
    //       //   method: 'get',
    //       //   params: {
    //       // tablename:node.data.text+new Date().getTime()
    //       // tablename: data.id
    //       // },
    //       // url: 'http://127.0.0.1:8082/add/getAll'
    //       // }).then(res => {
    //       // console.log(res.data)
    //       // this.props.value.value_1=res.data[0].speed;
    //       // console.log( this.props.value.value_1);
    //       //当选中的时候赋予属性值node
    //       // this.props = {
    //       //   a: res.data[0].speed,
    //       //   node: data,
    //       //   line: null,
    //       //   multi: false,
    //       //   nodes: null,
    //       //   locked: data.locked
    //       // }
    //       // })
    //       let newtable=[
    //         { data1:data.id,
    //         data2:data.name,
    //         data3:3,
    //         data4:4,
    //         data5:100,
    //         data6:200,
    //         data7:30,}
           
    //       ]
    //       this.tableData2=newtable
    //       console.log(data)
    //       this.props = {
    //         a: data.id,
    //         node: data,
    //         line: null,
    //         multi: false,
    //         nodes: null,
    //         locked: data.locked
    //       }
    //       if (data.id == '开关通' || data.id == '开关闭') {
    //         if (
    //           this.ruleForm.age == '1026263358' &&
    //           this.ruleForm.pass == '123456' &&
    //           this.ruleForm.checkPass == '123456'
    //         ) {
    //            console.log("密码认证完毕")
    //           if (data.id == '开关通') {
    //              console.log("开关为通")
    //             data.id = '开关闭'
              
    //             data.fillStyle = '#15F720'
    //           } else if (data.id == '开关闭') {
    //             console.log("开关为比")
    //             data.id = '开关通'
    //             data.fillStyle = '#F82109'
    //           }
    //           // } else if (data.type == '上') {
    //           //   data.icon = '\ue919'
    //           // } else if (data.type == '下') {
    //           //   data.text = '上'
    //           //   data.icon = '\ue901'
    //           // } else if (data.type == '左') {
    //           //   data.text = '右'
    //           //   data.icon = '\ue900'
    //           // } else if (data.type == '右') {
    //           //   data.text = '左'
    //           //   data.icon = '\ue906'
    //           // }

    //           // console.log(data.iconColor)
    //           // console.log(data.icon)
    //         } else {
    //           this.$message.error('您需要输入账号和密码才能修改控件状态')
    //         }
    //       } else {
    //         this.$message.error('您选择的控件无法操作，请重新选择')
    //       }

    //       break
    //     case 'addNode':
    //       this.props = {
    //         node: data,
    //         line: null,
    //         multi: false,
    //         nodes: null,
    //         locked: data.locked
    //       }

    //       break
    //     case 'line':
    //     case 'addLine':
    //       this.props = {
    //         node: null,
    //         line: data,
    //         multi: false,
    //         nodes: null,
    //         locked: data.locked
    //       }
    //       break
    //     case 'multi':
    //       this.props = {
    //         node: null,
    //         line: null,
    //         multi: true,
    //         nodes: data.nodes.length > 1 ? data.nodes : null,
    //         locked: this.getLocked(data)
    //       }
    //       break
    //     case 'space':
    //       this.props = {
    //         node: null,
    //         line: null,
    //         multi: false,
    //         nodes: null,
    //         locked: false
    //       }
    //       break
    //     case 'moveOut':
    //       break
    //     case 'moveNodes':
    //     case 'resizeNodes':
    //       if (data.length > 1) {
    //         this.props = {
    //           node: null,
    //           line: null,
    //           multi: true,
    //           nodes: data,
    //           locked: this.getLocked({ nodes: data })
    //         }
    //       } else {
    //         this.props = {
    //           node: data[0],
    //           line: null,
    //           multi: false,
    //           nodes: null,
    //           locked: false
    //         }
    //       }
    //       break
    //     case 'resize':
    //     case 'scale':
    //     case 'locked':
    //       if (this.canvas && this.canvas.data) {
    //         this.$store.commit('canvas/data', {
    //           scale: this.canvas.data.scale || 1,
    //           lineName: this.canvas.data.lineName,
    //           fromArrowType: this.canvas.data.fromArrowType,
    //           toArrowType: this.canvas.data.toArrowType,
    //           fromArrowlockedType: this.canvas.data.locked
    //         })
    //       }
    //       break
    //   }
    // },
    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    },

    handle_new(data) {
      this.canvas.open({ nodes: [], lines: [] })
    },

    handle_open(data) {
      this.handle_replace(data)
    },
 //将保存到数据库中的拓扑图读出来
    handle_readtodatabase(data) {
      this.$axios({
        method: 'get',
        params: {
          name: '运行控制2'
        },
        url: 'http://127.0.0.1:8082/topology/readtopology'
      }).then(res => {
        // console.log(res.data)
        // console.log(res.data.data)
        // console.log(JSON.parse(res.data.data))
        let newdata = JSON.parse(res.data.data)
        this.canvas.open(newdata)
      })
    },
    handle_replace(data) {
      const input = document.createElement('input')
      input.type = 'file'
      input.onchange = event => {
        const elem = event.srcElement || event.target
        if (elem.files && elem.files[0]) {
          const name = elem.files[0].name.replace('.json', '')
          const reader = new FileReader()
          reader.onload = e => {
            const text = e.target.result + ''
            try {
              const data = JSON.parse(text)
              if (
                data
                // data &&
                // Array.isArray(data.nodes) &&
                // Array.isArray(data.lines)
              ) {
                this.canvas.open(data)
              }
            } catch (e) {
              return false
            }
          }
          reader.readAsText(elem.files[0])
        }
      }
      input.click()
    },
  onContextMenu(event) {
      event.preventDefault() //阻止默认行为
      event.stopPropagation() //阻止冒泡

      if (event.clientY + 360 < document.body.clientHeight) {
        this.contextmenu = {
          left: event.clientX + 'px',
          top: event.clientY + 'px'
        }
      } else {
        this.contextmenu = {
          left: event.clientX + 'px',
          bottom: document.body.clientHeight - event.clientY + 'px'
        }
      }
    },
    handle_save(data) {
      FileSaver.saveAs(
        new Blob([JSON.stringify(this.canvas.data)], {
          type: 'text/plain;charset=utf-8'
        }),
        // `le5le.topology.json`
        `11111.json`
      )
    },

    handle_savePng(data) {
      this.canvas.saveAsImage('le5le.topology.png')
    }
  }
}
</script>
<style lang="scss">
.form .el-form-item__label {
  color: black;
}
.el-form-item__label {
  color: white;
}
.input1 .el-input__inner {
  width: 30rem;
  height: 3rem;

  border-radius: 4px;
  border: 1px solid #b6d8f1;
  color: #6a6f77;
  outline: 0;
  
}
</style>
<style lang="scss" scoped>
#topology-canvas {
  width: 100%;
  height: 600px;

  background-image: url(../../assets/images/新UI23.png);

  background-size: 100% 100%;
}
.page {
  display: flex;
  width: 100%;
  height: 100%;
}
// .full {
//   flex: 1;
//   width: initial;
//   position: relative;
//   overflow: auto;
//   background: #fff;

//   // background-image: url(../../assets/images/新UI26.png);
//   // background-repeat: no-repeat;
// }
#table1 {
  width: 98%;
  height: 380px;
  padding-top: 15px;
  background-image: url(../../assets/images/新UI23.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#table2 {
  width: 98%;
  height: 380px;
  padding-top: 15px;
  background-image: url(../../assets/images/新UI23.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#table3 {
  width: 98%;
  height: 380px;
  padding-top: 15px;
  background-image: url(../../assets/images/新UI23.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#table4 {
  // width: 450px;
  width: 98%;
  height: 394px;
  background-image: url(../../assets/images/新UI23.png);
  background-color: '#005A5B';
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.zz {
  margin-left: 1rem;
}
#allmap {
  // height: 600px;

  padding-left: 0px;
  padding-right: 0px;
}
.newbutton1 {
  position: absolute;
  left: 90%;
  top: 70px;
  z-index: 1;
}
.newbutton2 {
  position: absolute;
  left: 90%;
  top: 130px;
  z-index: 1;
}
.newbutton3 {
  position: absolute;
  left: 90%;
  top: 10px;
  z-index: 1;
}
.newbutton4 {
  position: absolute;
  left: 90%;
  top: 190px;
  z-index: 1;
}
.el-button {
  width: 9.5rem;
  height: 45px;
  margin-top: 13px;
  margin-left: 13px;
  background-image: url(../../assets/images/新UI25.png);

  background-size: 100%;
  border-width: 1px;
  border-radius: 50px;
}
.el-input {
  width: 5rem;
}
.el-form {
  padding-top: 60px;
  margin-right: 40px;
}
.full {
  flex: 1;
  width: initial;
  position: relative;
  overflow: auto;
  background: #fff;

  background-image: url(../../assets/images/新UI26.png);
  background-repeat: no-repeat;
}
.context-menu {
  position: fixed;
  z-index: 10;
}
.body {
  width: 100%;

  margin-top: 0px;

  background-image: url(../../assets/images/新UI12.png);

  background-size: 100% 100%;
}
</style>
